<template>
  <!--     box-shadow: 0px 0px 8px 0px #9f9fa0;    -->
  <div class="home">
  
    <!-- 统计图 -->
    <div ref="main" class="main"></div>
  </div>
</template>


<script>
import * as echarts from "echarts"; //引入echarts图表格
import "@/assets/fonts/font/iconfont.css"; //引入阿里字体图标的css的


export default {
  //挂在后  有数据  有dom
  async mounted() {
    // 1.基于准备好的dom，初始化echarts实例
    // const myChart = echarts.init(this.$refs.main);
    //2.找到有大小的盒子
    this.linehart = echarts.init(this.$refs.main);

    // 指定图表的配置项和数据
    const  option = {
                      title: {
    text: '商品统计'
                      },
                      legend: {
    data: ['价格', '销量']
                      },
                      radar: {
    // shape: 'circle',
    indicator: [
      { name: '成本', max: 6500 },
      { name: '加工', max: 16000 },
      { name: '利润', max: 30000 },
      { name: '消耗', max: 38000 },
      { name: '配送', max: 52000 },
      { name: '反馈', max: 25000 }
    ]
                      },
                      series: [
    {
      name: '价格 vs 销量',
      type: 'radar',
      data: [
        {
          value: [4200, 3000, 20000, 35000, 50000, 18000],
          name: '价格'
        },
        {
          value: [5000, 14000, 28000, 26000, 42000, 21000],
          name: '销量'
        }
      ]
    }
                      ]
                    };


    // 使用刚指定的配置项和数据显示图表。
    this.linehart.setOption(option);


    //让图表自适应
    window.addEventListener("resize", this.resizeListener);
  },
  //方法
  methods: {
    //图表自适应函数
    resizeListener() {
      this.linehart.resize();//echarts内置对象==resize()重置图表大小
    },
  },
  // 数据
  data() {
    return {
      homeData:{
        amountData:'',//金额数据
        orderData:'',//订单数据
        todayOrder:'',//今日订单
        totalAmount:'',//总销售额
        totalOrder:'',//总订单
        totayAmount:'',//今日销售额
        xData:"",//x轴数据
      },//首页数据
      linehart: {},
    };
  },
  //销毁前
  beforeDestroy(){
      window.removeEventListener("resize", this.resizeListener);
  },

};
</script>

<style lang="less" scoped>
.home {
  .main {
    flex: 1;
    height: 950px;
    background-color: #fff;
    padding: 20px;
    box-shadow: 0px 0px 8px 0px #9f9fa0;
    border-radius: 5px;
    display: flex;
  }
}
</style>